<template>
  <div class="lxwm">
    <router-link class="nav-btn" to="/home"></router-link>
    <div class="sub-head ppjs-head">
      <div class="sub-head1 ppjs-head1 animated rollIn">&nbsp;</div>
      <div class="sub-head2-wrap ppjs-head2-wrap animated height1 delay-2">
        <div class="sub-head2 ppjs-head2">&nbsp;</div>
      </div>
      <div class="sub-head3 ppjs-head3 animated bounceIn delay-4">&nbsp;</div>
      <div class="sub-head4 ppjs-head4 animated fadeIn delay-5">
        <ul class="waves">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head5 ppjs-head5 animated fadeIn delay-5">
        <ul class="waves waves1">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head6 ppjs-head6 animated fadeIn "></div>
    </div>
    <div class="ppjs">
        <div class="ppjs-img1-wrap">
            <img src alt v-lazy="ppjsimg1">
            <div class="ppjs-img1-1"> 
              <img src alt v-lazy="ppjsgif01">
              <img src alt v-lazy="ppjsimg01" class="img-title">
            </div>
           <div class="ppjs-img1-2">
              <img src alt v-lazy="ppjsgif02">
              <img src alt v-lazy="ppjsimg02" class="img-title">
            </div>
           <div class="ppjs-img1-3">
              <img src alt v-lazy="ppjsgif03">
              <img src alt v-lazy="ppjsimg03" class="img-title img-mls">
            </div>
            <div class="ppjs-img1-4">
              <img src alt v-lazy="ppjsgif04">
              <img src alt v-lazy="ppjsimg04" class="img-title">
            </div>
            <div class="ppjs-img1-5">
              <img src alt v-lazy="ppjsgif05">
              <img src alt v-lazy="ppjsimg05" class="img-title img-mls">
            </div>
        </div>
        <img src alt v-lazy="ppjsimg2">
        <div class="ppjs-img2-wrap">
          <img src alt v-lazy="ppjsimg3">
          <div class="lbt">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper1.png" alt>
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper2.png" alt>
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper3.png" alt>
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper4.png" alt>
              </swiper-slide>
              <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper5.png" alt>
              </swiper-slide>
               <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper6.png" alt>
              </swiper-slide>
               <swiper-slide>
                <img width="100%" src="../assets/images/ppjs-swiper7.png" alt>
              </swiper-slide>
              
            </swiper>
            <div class="ppjs-hand left-move">&nbsp;</div>
          </div>
        </div>
        <img src alt v-lazy="ppjsimg4">
    </div>
    <div class="next-bg">
      <div class="next-3 animated fadeIn"></div>
      <div class="next-4 animated fadeIn"></div>
      <div class="next-5 animated fadeIn"></div>
      <router-link to="/cpqd" class="next-img-wrap">
        <img src="../assets/images/next-1.png" class="next-img" alt>
      </router-link>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "ppjs",
  data() {
    return {
      isbtn1: true,
      isbtn2: false,
      isbtn3: true,
      isbtn4: false,
      ppjsimg1: require("@/assets/images/ppjs-img1.jpg"),
      ppjsgif01: require("@/assets/images/ppjs-jz.gif"),
      ppjsimg01: require("@/assets/images/ppjs-img1-1.png"),
      ppjsgif02: require("@/assets/images/ppjs-zq.gif"),
      ppjsimg02: require("@/assets/images/ppjs-img1-2.png"),
      ppjsgif03: require("@/assets/images/ppjs-mls.gif"),
      ppjsimg03: require("@/assets/images/ppjs-img1-3.png"),
      ppjsgif04: require("@/assets/images/ppjs-qc.gif"),
      ppjsimg04: require("@/assets/images/ppjs-img1-4.png"),
      ppjsgif05: require("@/assets/images/ppjs-kl.gif"),
      ppjsimg05: require("@/assets/images/ppjs-img1-5.png"),
      ppjsimg2: require("@/assets/images/ppjs-img2.jpg"),
      ppjsimg3: require("@/assets/images/ppjs-img3.jpg"),
      ppjsimg4: require("@/assets/images/ppjs-img4.jpg"),
      swiperOption: {
        
        speed:300,
        autoplay: {
          reverseDirection: true
      },
      }
    };
  },
  mounted: function() {
    
  },
  methods: {},
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  beforeDestroy: function() {

  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>

<style scoped>
.ppjs img {
  display: block;
  width: 100%;
}
.swiper-pagination >>>.swiper-pagination-bullet-active{
    background: #000;
}
.swiper-container-horizontal >>> .swiper-pagination-bullets{
    bottom:0;
}
.ppjs-head{
 background: url(../assets/images/ppjs-head.jpg) no-repeat center center; 
 background-size: 100% 100%;
}
.ppjs-head1{
  left: 7.65rem;
}
.ppjs-head2-wrap{
  left: 8.525rem;
}
.ppjs-head2{
  background: url(../assets/images/ppjs-head2.png) no-repeat center center; 
  background-size: 100% 100%;
}
.ppjs-head3{
  left: 3.9rem;
  top: 5.375rem;
  width: 10.55rem;
  height:12.9rem ;
  background: url(../assets/images/ppjs-head3.png) no-repeat center center; 
 background-size: 100% 100%;
}
.ppjs-head4{
  left: 2.75rem;
  top: 14.225rem;
}
.ppjs-head5{
  left: 13.1rem;
  top: 14.15rem;
}
.ppjs-head6{
  position: absolute;
  left:0;
  bottom:1.8rem ;
  width: 100%;
  height: 15.575rem;
  background: url(../assets/images/ppjs.gif) no-repeat center center;
  background-size: 100% 100%;
}
.img-title{
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 2.45rem!important;
  height: 1.75rem;
}
.ppjs-img1-wrap{
  position: relative;
}
.ppjs-img1-1{
  position: absolute;
  left: 1.025rem;
  top: 10.1rem;
  width: 6.5rem;
  height: 6.5rem;
}

.ppjs-img1-2{
  position: absolute;
  right: 1.75rem;
  top: 10.825rem;
  width: 6.5rem;
  height: 6.5rem;
}
.ppjs-img1-3{
  position: absolute;
  left: .5rem;
  top: 19.525rem;
  width: 8rem;
  height: 6.5rem;
}
.img-mls{
  right: 0;
  top: 0;
}

.ppjs-img1-4{
  position: absolute;
  right: 1.75rem;
  top: 19.825rem;
  width: 6.5rem;
  height: 6.5rem;
}
.ppjs-img1-5{
  position: absolute;
  left: .5rem;
  top: 28.9rem;
  width: 8rem;
  height: 6.5rem;
}
.ppjs-img2-wrap{
  position: relative;
}
.lbt{
  position: absolute;
  left: 0;
  top: 5.25rem;
  width: 100%;
  height: 9.125rem;
}
.ppjs-hand{position: absolute;left: 9.6rem;bottom: -0.2rem;width: .97rem;height: 1.07rem;background: url(../assets/images/fwbz-hand.png) no-repeat;background-size: 100% 100%;}
.left-move {
    -webkit-animation-name: left-move;
    animation-name: left-move;
    -webkit-animation-duration:3s;
    animation-duration:3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes left-move{
   0%{opacity:1;transform: translateX(-2.83rem);}
    50%{opacity: 0.8;}
    100%{opacity:1;transform: translateX(0);}
}

@keyframes left-move{
   0%{opacity:1;-webkit-transform: translateX(-2.83rem);}
    50%{opacity: 0.8;}
    100%{opacity:1;-webkit-transform: translateX(0); }
}
</style>
